<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-form ref="form" :model="articalForm">
        <el-form-item label="状态">
          <el-radio-group v-model="articalForm.status">
            <el-radio label>全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="频道">
          <channel v-model="articalForm.channel_id"></channel>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            v-model="articalForm.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-button type="primary" @click="choose">筛选</el-button>
      </el-form>
    </div>
    <div class="msg">
      <span>共找到{{totalCount}}条符合条件的内容</span>
      <el-table :data="tableData" style="width: 100%" v-loading="tableLoading" >
        <el-table-column prop="cover.images[0]" label="封面" width="240">
          <template slot-scope="scope">
            <img
              :src="item"
              alt
              srcset
              v-for="(item,index) in scope.row.cover.images"
              :key="index"
              width="60"
              height="60"
            />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="180"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag>{{scope.row.status | getStatus}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="pubdate" label="发布时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="success" size="mini" @click="$router.push(`/edit/${scope.row.id}`)">修改</el-button>
            <el-button type="danger" size="mini" @click="doDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="totalCount"
          @current-change="currentPage"
          :page-size="pageNum"
          :disabled = "pageDisabled"
        ></el-pagination>
      </div>
    </div>
  </el-card>
</template>

<script>
import channel from "@/components/channel/index.vue";
import {
  articalList,
  articalClickPage,
  articalChoose,
  articalDel
} from "@/api/artical.js";
export default {
  name: "artical",
  data() {
    return {
      articalForm: {
        status: "",
        channel_id: "",
        date: []
      },
      tableData: [],
      totalCount: 0,
      pageNum: 10,
      tableLoading:false,
      pageDisabled:false
    };
  },
  components: {
    channel
  },
  //获取所有文章列表
  async created() {
    let res = await articalList();
    // console.log(res);
    try {
      
      if (res.status == 200) {
        this.tableData = res.data.data.results;
        this.totalCount = res.data.data.total_count;
      }
    } catch (error) {
      
    }
  },
  //列表状态过滤器
  filters: {
    getStatus(val) {
      switch (val) {
        case 0:
          return "草稿";
        case 1:
          return "待审核";
        case 2:
          return "审核通过";
        case 3:
          return "审核失败";
        case 4:
          return "已删除";
        default:
          return "null";
      }
    }
  },
  methods: {
    //点击页面事件
    async currentPage(pages) {
      this.loadData(pages);
    },
    //根据页码和筛选项获取数据
    async loadData(p) {
      //加载效果
      this.tableLoading = true;
      //页码禁用
      this.pageDisabled = true
      let res = await articalChoose({
        status:
          this.articalForm.status == "" ? undefined : this.articalForm.status,
        channel_id:
          this.articalForm.channel_id == ""
            ? undefined
            : this.articalForm.channel_id,
        begin_pubdate: this.articalForm.date[0],
        end_pubdate: this.articalForm.date[1],
        page: p,
        per_page: this.pageNum
      });
      // console.log(res);
      
      if (res.status == 200) {
        this.tableLoading = false
        this.pageDisabled = false
        this.tableData = res.data.data.results;
        this.totalCount = res.data.data.total_count;
      }
    },
    //筛选按钮
    choose() {
      this.loadData(1);
    },
    //删除文章
    doDel(row) {
      this.$confirm("真的要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          // console.log(row.id);
          let res = await articalDel(row.id);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.loadData(1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style lang="less" scoped>
.page {
  text-align: center;
}
</style>